<template>
  <div class="table-ctrl-body">
    <!--按钮组-->
    <div class="Btns-ctrl-body">

      <!--高级搜索-->
      <SearchPublic
        :searchObj="searchObj"
        @searchParams="searchParamsFn"
      ></SearchPublic>

     <!-- <div class="search-ctrl f-l"  style="display: none">
        <form style="height: 100%;">
          <input placeholder="搜索关键字" class="search-text" v-model="tableSearchText">
          <button class="search-btn btn btn-info" type="button" @click="tableSearchBtn">搜索</button>
        </form>
      </div>-->

      <div class="btns f-r">
        <button type="button" class="btn btn-info" @click="addSectionFn">新增</button>
        <button type="button" class="btn btn-warning" @click="revampSectionFn">修改</button>
        <button type="button" class="btn btn-danger" @click="deleteSectionFn">删除</button>
        <button type="button" class="btn btn-success" @click="querySectionFn">详情</button>
        <button type="button" class="btn btn-info" @click="pushModal">导入</button>
        <!--<button type="button" class="btn btn-success">刷新</button>-->
      </div>
    </div>
    <!--按钮组闭合-->
    <!--表格组-->
    <div class="table-ctrl">
      <!--表格头-->
      <!--{{treeTableRow}}-->
      <div class="table-header">
        <table class="table-default">
          <thead>
          <tr>
            <th
              v-for="(item,index) in treeTable.tHeader"
              :key="index">
              {{item.value}}
            </th>
          </tr>
          </thead>
        </table>
      </div>
      <!-- {{treeTableRow}} -->
      <!-- {{treeTable.tHeader}} -->
      <!--表格中部-->
      <div class="table-overflowX">
        <table class="table-default">
          <tbody>
          <tr
            v-for="(trs,index) in treeTableRow.data"
            @click="userSelect(trs,index)"
            :class="{active: isActive===index}"
            :key="index">
            <td v-for="(tds,index) in treeTable.tHeader" :key="index" :title="trs[tds.key]">
              {{ [trs,tds.key] | tableName }}
            </td>
          </tr>
          </tbody>
        </table>
      </div>

      <!--表格翻页-->
      <Pages
        v-show="treeTableRow.elementsSum !== 0"
        v-if="treeTableRow"
        :showItem="10"
        :pageSize="20"
        :allDataSum="treeTableRow.elementsSum"
        :allpage="(Math.ceil(treeTableRow.elementsSum/20))"
        @current-change="tablePageData"
      ></Pages>

    </div>

    <!--新增部门-->
    <AddSection
      @closeModalAddPolice="closeModalAddSectionFn"
      :addModalObj="addModalObj"
      @newPoliceSucceed="newPoliceSucceedFn"
    ></AddSection>
    <!--修改部门-->
    <RevampSection
      @closeModalRevampSection="closeModalRevampSectionFn"
      :revampDetailsModal="revampDetailsModal"
      :sectionId="activeSectionId"
    ></RevampSection>
    <!--查询部门信息-->
    <SectionDetails
      :revampDetailsModal="detailsPoliceObj"
      :sectionId="activeSectionId"
      @closeModalDetailsModal="closeModalDetailsModalFn"
    ></SectionDetails>

    <BulkImport
      :bulkImportObj="bulkImportObj"
      @upModalClose="upModalCloseFn"
    ></BulkImport>

  </div>
</template>

<script>
   import Pages from "../../sudoku/atom/pages"
   import AddSection from "./AddSection"
   import RevampSection from "./RevampSection"
   import SectionDetails from "./SectionDetails"
   import SearchPublic from "../../publicTemplate/search/SearchPublic"
   import BulkImport from "../../publicTemplate/bulkImport/BulkImport"
  // import revampPoliceModal from "./revampPoliceModal"
  // import policeDetails from "./policeDetails"
  export default {

    name: "SectionTreeTable",
    props:["treeTableRow","station","searchObj"],
    data() {
      return {
        tableSearchText:"",
        dialogContent:{},
        isActive:-1,
        activeSectionId:null,
        treeTable:{
          tHeader:[
            {"key":"stationName","value":"部门名称"},
            {"key":"ipAddress","value":"部门IP"},
            {"key":"orgcode","value":"组织代码"},
            {"key":"tel","value":"联系电话"},
            {"key":"sort","value":"排序"},
            {"key":"stationNum","value":"部门类型"},
            {"key":"ifUse","value":"是否使用"}
          ]
        },
        userDetailsModal:{
          isShow:false
        },
        revampDetailsModal:{
          isShow:false
        },
        addModalObj:{
          isShow:false
        },
        detailsPoliceObj:{
          isShow:false
        },
        PoliceHasNoUser:[],
        bulkImportObj:{
          title:"导入部门",
          isShow:false,
          TemplateUrl:"/policeFacility/BSBatch/upExcel/station",
          upUrl:"/policeFacility/BSBatch/station",
          urlType:"admin"
        },
      }
    },
    components:{
      Pages,
      AddSection,
      RevampSection,
      SectionDetails,
      SearchPublic,
      BulkImport
      // revampPoliceModal,
      // policeDetails
    },
    watch:{
      treeTableRow:{
        handler(v1){
          //console.log(v1);
          this.isActive = -1;
          this.activeSectionId = null;
        },
        deep:true
      }
    },
    filters:{
      tableName(value){ //设置表格数据信息
        let obj = value[0];
        let keyStr = value[1];
        let returnVal = "" ;
        if( keyStr.indexOf("|") === -1 ){
          if( obj[keyStr] === 0 && value[1] === "ifUse" ){
            returnVal = "否"
          }else if( obj[keyStr] === 1 && value[1] === "ifUse" ){
            returnVal = "是"
          }else{
            returnVal = obj[keyStr];
          }
        }else {
          const keyArr = keyStr.split("|");
          returnVal = obj[keyArr[0]][keyArr[1]]
        }

        return returnVal;
      }
    },
    methods:{
      //修改用户弹窗关闭
      revampCloseFn(){
        this.revampUser.isShow = false;
      },
      //新增弹窗关闭
      closeModalFn(){
        this.addModalObj.isShow=false;
      },
      //表格分页
      tablePageData(page){
        this.clearTableSelect();
        this.$emit("pageChange",page);
      },
      //初始化表格选择条件
      clearTableSelect(){
        this.isActive = -1;
        this.activeUserId = null;
      },
      //表格搜索
      tableSearchBtn(){
        this.$emit("tableSearch",this.tableSearchText);
        this.tableSearchText = "";
      },
      //选择警员
      userSelect(obj,index){
        this.isActive = index;
        this.activeSectionId = obj.id;
        //console.log(this.activeSectionId);
      },
      //删除用户
      /*deleteUser(){

        if(this.activeUserId === null || this.activeUserId  === "null" || this.activeUserId  === ""){ //未选择用户
          this.dialogContent = {
            isShow :true,
            text:"请选择删除用户！",
            title:"温馨提示",
            Btns:[
              {"btnName":"确定","className":"btn-info","function":["close"]}
            ]
          };
        }else{
          this.dialogContent = {
            isShow :true,
            text:"确定删除该用户？",
            title:"温馨提示",
            Btns:[
              {"btnName":"取消","className":"btn-default","function":["close"]},
              {"btnName":"确定","className":"btn-info","function":["close",'del']}
            ]
          };
        }

      },*/
      //新增部门
      addSectionFn(){
        this.addModalObj.isShow = true;
        //缓存赋给新增组件
        this.sessionStorage = JSON.parse(sessionStorage.getItem("stationCommunication"));
        //console.log(this.sessionStorage);
      },
      //修改部门
      revampSectionFn(){
        //console.log(this.activeSectionId);
        if( this.activeSectionId ){
          this.revampDetailsModal.isShow = true;
        }else {
          this.s_alert("请选择部门！");
          // alert("请选择部门！");
        }

      },
      //删除部门
      deleteSectionFn(){
        if( this.activeSectionId ){
          let msg=confirm("是否确定删除该部门？");
          if(msg){
            this.$axios['delete'](this.HOST+"/station/",{
              params:{
                stationId:this.activeSectionId
              }
            })
              .then((data)=>{
                if(data.data.success === true){
                  this.s_alert("删除成功");
                  // alert("删除成功");
                  this.s_logwrite("基础信息管理-部门管理","删除部门");
                  this.$emit("policeDeleteCallBack",this.isActive);//删除刷新
                  this.activeSectionId = null; //清除选择的部门id
                  this.isActive = -1; //清除选择的该项
                }else if(data.data.success === false){
                  this.s_alert("删除失败！原因："+data.data.errorMsg);
                  // alert("删除失败！原因："+data.data.errorMsg);
                }
                //console.log(data);
              })
              .catch((err)=>{
                //console.log(err);
              })
          }
        }else {
          this.s_alert("请选择要删除的部门！");
          // alert("请选择要删除的部门！");
        }
      },
      //新增窗口关闭
      closeModalAddSectionFn() {
        this.addModalObj.isShow = false;
      },
      //修改窗口关闭
      closeModalRevampSectionFn(){
        this.revampDetailsModal.isShow = false;
        this.newSectionTable();
      },
      //更新部门列表
      newSectionTable(){
        this.$emit("newSectionTable");
      },
      //查询窗口关闭
      closeModalDetailsModalFn(){
        this.detailsPoliceObj.isShow = false;
      },
      //查询部门详细信息
      querySectionFn(){
        if( this.activeSectionId ){
          this.detailsPoliceObj.isShow = true;
        }else{
          this.s_alert("请选择需要查询的部门！");
          // alert("请选择需要查询的部门！");
        }
      },
      //导入用户模板
      pushModal(){
        this.bulkImportObj.isShow = true;
      },
      upModalCloseFn(){
        this.bulkImportObj.isShow = false;
        this.newPoliceSucceedFn();
      },
      //关闭查询
      policeDetailsCloseFn(){
        this.detailsPoliceObj.isShow = false;
      },
      //搜索
      searchParamsFn(searchParams){
        this.$emit("searchParamsParent")
      },
      //刷新表格
      newPoliceSucceedFn(){
        this.closeModalFn();
        this.$emit("newPoliceSucceedFnOrigin");//通知数据源头刷新页面
      }
    }

  }
</script>

<style scoped>
  .fadeInDown,
  .fadeOutUp {
    animation-duration: .500s;
  }
</style>
